<template>
  <img
    class="l-image-conponent"
    :style="{ ..._styleProps, position: 'relative', width: `${props.width}px` }"
    @click.prevent="handleClick"
    :src="src"
  />
</template>

<script lang="ts">
import { useComponentCommon2 } from '@/hooks/useComponentCommon';
import { transformToComponentProps2, imageDefaultProps, imageStylePropNames, type IImageDefaultProps } from '@/defaultProps'
// [ { type: Number, default: 20 }, ...rest ]
const  defaultProps = transformToComponentProps2(imageDefaultProps)
</script>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
const route = useRoute();
const isEditing:boolean = route.path.startsWith('/editor/')

const props = defineProps({
  ...defaultProps,
  src: {
    type: String,
    default: ''
  }
})

const { styleProps, handleClick } = useComponentCommon2(
  props as Readonly<Partial<IImageDefaultProps>>,
  imageStylePropNames,
  isEditing
)
const _styleProps = styleProps as any

</script>

<style lang="less" scoped>
.l-image-conponent {
  width: 200px;
}
</style>